<template>
  <v-app>
    <!-- 导航栏   -->
    <v-app-bar
        elevation="4"
        outlined
        app
        color="#FFF"
    >
      <header-bar />
    </v-app-bar>
    <!-- 轮播图区域 -->
    <v-container fluid class="pa-0" style="position: relative">
      <!-- 轮播图 -->
      <v-carousel
          cycle
          hide-delimiters
          hide-delimiter-background
          v-model="current">
        <v-carousel-item
            v-for="carousel in carousels"
            :key="carousel.id"
            :to="carousel.to"
        >
          <img :src="carousel.picture" alt=""/>
        </v-carousel-item>
      </v-carousel>
      <!-- 轮播图幻灯片 -->
      <v-slide-group
          show-arrows
          v-model="current"
          class="pa-4"
          style="position: absolute;bottom: 0;right: 0;"
      >
        <v-slide-item
            v-for="carousel in carousels"
            :key="carousel.id"
            :to="carousel.to"
            v-slot="{active, toggle }"
        >
          <v-card
              class="rounded-0 ml-3"
              :class="{'mask': !active}"
              height="200"
              width="100"
              @mouseenter="toggle"
              style="width: 100px;height: 60px;cursor: pointer;"
          >
            <v-img :src="carousel.picture" style="height: 60px"></v-img>
          </v-card>
        </v-slide-item>
      </v-slide-group>
    </v-container>

    <v-container fluid class="d-flex justify-center mt-5">
      <!-- 视频搜索、视频分类、视频列表 -->
      <v-card flat width="1200" class="mr-8">
        <!-- 视频搜索 -->
        <v-container class="d-flex justify-center">
          <v-menu
              tile
              offset-y
              allow-overflow
              max-width="355"
              v-model="hotSearch.show">

            <template v-slot:activator="{ on, attrs }">
              <v-card flat width="400" class="d-flex">
                <v-text-field
                    dense
                    outlined
                    hide-details
                    placeholder="精彩世界一起探索"
                    class="rounded-pill"
                    v-bind="attrs"
                    v-on="on"
                    v-model="searchValue"
                />
                <v-btn icon dark class="info ml-2">
                  <v-icon>mdi-magnify</v-icon>
                </v-btn>
              </v-card>
            </template>

            <v-card class="rounded-0">
              <v-subheader>热门搜索</v-subheader>
              <v-list dense class="pt-0">
                <v-list-item
                    v-for="(item, index) in hotSearch.data"
                    :key="item.id"
                    class="pl-3 move"
                    @click="searchFilmByHotTitle(item)"
                >
                  <v-list-item-icon class="mr-2">
                    <v-icon color="red">mdi-numeric-{{ index + 1 }}-box</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content class="move">
                    <v-list-item-title v-text="item.title"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-card>
          </v-menu>
        </v-container>
        <!-- 视频分类 -->
        <v-card class="px-2 mt-4" max-width="1160">
          <v-simple-table>
            <template v-slot:default>
              <tbody>
              <tr
              >
                <td class="font-weight-black pr-0" width="50">分类</td>
                <td class="px-0">
                  <v-chip-group show-arrows v-model="categoryId">
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        v-for="filmCategory in filmCategories"
                        :key="filmCategory.id"
                        :value="filmCategory.id"
                    >
                      {{ filmCategory.name }}
                    </v-chip>
                  </v-chip-group>
                </td>
              </tr>
              <tr>
                <td class="font-weight-black pr-0">类型</td>
                <td class="px-0">
                  <v-chip-group column v-model="filmTypes.id">
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        :value="0"
                    >
                      全部
                    </v-chip>
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        v-for="filmType in filmTypes.list"
                        :key="filmType.id"
                        :value="filmType.id"
                    >
                      {{ filmType.name }}
                    </v-chip>
                  </v-chip-group>
                </td>
              </tr>
              <tr>
                <td class="font-weight-black pr-0">地区</td>
                <td class="px-0">
                  <v-chip-group column v-model="filmArea.id">
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        :value="0"
                    >
                      全部
                    </v-chip>
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        v-for="area in filmArea.list"
                        :key="area.id"
                        :value="area.id"
                    >
                      {{ area.name }}
                    </v-chip>
                  </v-chip-group>
                </td>
              </tr>
              <tr>
                <td class="font-weight-black pr-0">时间</td>
                <td class="px-0">
                  <v-chip-group column v-model="filmPublishTime.id">
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        :value="0"
                    >
                      全部
                    </v-chip>
                    <v-chip
                        small
                        color="transparent"
                        class="mx-4"
                        active-class="info"
                        v-for="time in filmPublishTime.list"
                        :key="time.id"
                        :value="time.id"
                    >
                      {{ time.name }}
                    </v-chip>
                  </v-chip-group>
                </td>
              </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-card>
        <!-- 影音列表 -->
        <v-container class="mt-4 px-0">
          <h3>影音列表</h3>
          <div class="mt-2 d-flex flex-wrap">
            <film-card v-for="film in films.list" :key="film.id" :film="film">
              <template v-slot:top>
                <div
                    class="success text-center rounded-l-xl tag"
                >
                  {{ film.topLabel }}
                </div>
              </template>
              <template v-slot:bottom v-if="film.bottomLabel">
                <div
                    class="bottom-tag"
                >
                  {{ film.bottomLabel }}
                </div>
              </template>
            </film-card>
          </div>
          <v-pagination
              class="mt-10"
              v-model="films.currentPage"
              :length="films.totalPage"
              :total-visible="8"
              v-if="films.totalPage !== 1"
          ></v-pagination>
        </v-container>
      </v-card>
      <!-- 追剧列表 -->
      <v-card flat width="280">
        <div class="d-flex align-center">
          <v-divider/>
          <span class="grey--text mx-5">追剧中</span>
          <v-divider/>
        </div>
        <film-card
            v-for="film in bingeWatchingList"
            :key="film.id"
            :film="film"
            :width="320"
            class="mt-4"
        >
          <template v-slot:top v-if="film.topLabel">
            <div
                class="text-center rounded-l-xl tag"
                :class="showClass(film.topLabel)"
            >
              {{ film.topLabel }}
            </div>
          </template>
          <template v-slot:bottom v-if="film.bottomLabel">
            <div
                class="bottom-tag"
            >
              {{ film.bottomLabel }}
            </div>
          </template>
        </film-card>
      </v-card>
    </v-container>

    <!-- 登录注册弹出框   -->
    <login-register-dialog/>

    <v-footer padless class="mt-10">
      <zf-footer />
    </v-footer>
  </v-app>
</template>

<script>
import LoginRegisterDialog from "@/components/LoginRegisterDialog/LoginRegisterDialog";
import FilmCard from "@/components/FilmCard/FilmCard";

export default {
  name: "FilmView",
  components: {LoginRegisterDialog, FilmCard},
  data() {
    return {
      current: 0,
      carousels: [],
      searchValue: null,
      hotSearch: {
        show: false,
        data: []
      },
      categoryId: null,
      filmCategories: [],
      filmTypes: {
        id: null,
        list: []
      },
      filmArea: {
        id: null,
        list: []
      },
      filmPublishTime: {
        id: null,
        list: []
      },
      films: {
        currentPage: 1,
        totalPage: 25,
        beforeReady: false,
        list: []
      },
      bingeWatchingList: []
    }
  },
  methods: {
    searchFilmByHotTitle(film) {
      this.searchValue = film.title
      //请求服务器查询
    },
    handleScroll(){
      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 500) {
        // 滑动滚动条时清空搜索
        this.hotSearch.show = false
      }
    },
    showClass(label) {
      if(label === "首播") {
        return "red"
      }else if(label === "VIP") {
        return "warning"
      }else {
        return "success"
      }
    }
  },
  watch: {
    categoryId(newValue) {
      switch (newValue) {
        case 1:

          this.filmTypes.list = [

            {id: 1, name: '青春'},

            {id: 2, name: '爱情'},

            {id: 3, name: '谍战'},

            {id: 4, name: '冒险'},

            {id: 5, name: '穿越'},

            {id: 6, name: '仙侠'},

            {id: 7, name: '罪案'},

            {id: 8, name: '年代'},

            {id: 9, name: '古装'},

            {id: 10, name: '武侠'},

            {id: 11, name: '警匪'},

            {id: 12, name: '战争'},

            {id: 13, name: '军旅'},

            {id: 14, name: '神话'},

            {id: 15, name: '科幻'},

            {id: 16, name: '悬疑'},

            {id: 17, name: '历史'},

            {id: 18, name: '儿童'},

            {id: 19, name: '农村'},

            {id: 20, name: '都市'},

            {id: 21, name: '家庭'},

            {id: 22, name: '喜剧'},

            {id: 23, name: '偶像'},

            {id: 24, name: '时装'},

          ]

          break
        case 2:

          this.filmTypes.list = [

            {id: 2, name: '爱情'},

            {id: 4, name: '冒险'},

            {id: 10, name: '武侠'},

            {id: 11, name: '警匪'},

            {id: 12, name: '战争'},

            {id: 14, name: '神话'},

            {id: 15, name: '科幻'},

            {id: 16, name: '悬疑'},

            {id: 17, name: '历史'},

            {id: 18, name: '儿童'},

            {id: 25, name: '犯罪'},

            {id: 26, name: '恐怖'},

            {id: 27, name: '惊悚'},

            {id: 28, name: '戏曲'},

            {id: 29, name: '冒险'},

            {id: 30, name: '剧情'},

            {id: 31, name: '运动'},

          ]

          break
        case 3:

          this.filmTypes.list = [

            {id: 1, name: '相声'},

            {id: 22, name: '喜剧'},

            {id: 32, name: '音乐'},

            {id: 33, name: '舞蹈'},

            {id: 23, name: '偶像'},

            {id: 34, name: '情感'},

            {id: 35, name: '婚恋'},

            {id: 36, name: '体育'},

            {id: 37, name: '明星访谈'},

            {id: 38, name: '旅游'},

            {id: 39, name: '文化'},

            {id: 40, name: '时尚'},

            {id: 41, name: '美食'},

            {id: 42, name: '生活'},

            {id: 43, name: '益智'},

            {id: 44, name: '晚会'},

            {id: 45, name: '游戏'},

            {id: 46, name: '亲子'},

          ]

          break
        case 4:

          this.filmTypes.list = [

            {id: 47, name: '热血'},

            {id: 48, name: '格斗'},

            {id: 49, name: '恋爱'},

            {id: 50, name: '美少女'},

            {id: 51, name: '校园'},

            {id: 52, name: '搞笑'},

            {id: 53, name: '神魔'},

            {id: 54, name: '机战'},

            {id: 15, name: '科幻'},

            {id: 55, name: '真人'},

          ]

          break
        case 5:

          this.filmTypes.list = [

            {id: 41, name: '美食'},

            {id: 56, name: '人物'},

            {id: 57, name: '军事'},

            {id: 17, name: '历史'},

            {id: 58, name: '自然'},

            {id: 59, name: '探险'},

            {id: 60, name: '科技'},

            {id: 39, name: '文化'},

            {id: 61, name: '刑侦'},

            {id: 62, name: '社会'},

            {id: 38, name: '旅游'},

          ]

          break
      }
      switch (newValue) {
        case 1:

          this.filmArea.list = [

            {id: 1, name: '内地'},

            {id: 2, name: '中国香港'},

            {id: 3, name: '中国台湾'},

            {id: 4, name: '韩国'},

            {id: 5, name: '美国'},

            {id: 6, name: '日本'},

            {id: 7, name: '英国'},

            {id: 8, name: '泰国'},

          ]

          break
        case 2:

          this.filmArea.list = [

            {id: 1, name: '内地'},

            {id: 2, name: '中国香港'},

            {id: 3, name: '中国台湾'},

            {id: 4, name: '韩国'},

            {id: 5, name: '美国'},

            {id: 6, name: '日本'},

            {id: 7, name: '英国'},

            {id: 8, name: '泰国'},

            {id: 9, name: '法国'},

            {id: 10, name: '俄罗斯'},

            {id: 11, name: '意大利'},

            {id: 12, name: '德国'},

            {id: 13, name: '加拿大'},

          ]

          break
        case 3:

          this.filmArea.list = [

            {id: 1, name: '内地'},

            {id: 3, name: '中国台湾'},

            {id: 4, name: '韩国'},

            {id: 5, name: '美国'},

            {id: 7, name: '英国'},

          ]

          break
        case 4:

          this.filmArea.list = [

            {id: 1, name: '内地'},

            {id: 6, name: '日本'},

            {id: 5, name: '美国'},

            {id: 3, name: '中国台湾'},

            {id: 2, name: '中国香港'},

            {id: 4, name: '韩国'},

            {id: 7, name: '英国'},

            {id: 9, name: '法国'},

          ]

          break
        case 5:

          this.filmArea.list = [

            {id: 1, name: '内地'},

            {id: 2, name: '中国香港'},

            {id: 3, name: '中国台湾'},

            {id: 4, name: '韩国'},

            {id: 5, name: '美国'},

            {id: 6, name: '日本'},

            {id: 7, name: '英国'},

            {id: 10, name: '俄罗斯'},

            {id: 12, name: '德国'},

            {id: 13, name: '加拿大'},

            {id: 14, name: '澳大利亚'},

            {id: 15, name: '瑞士'},

            {id: 16, name: '西班牙'},

            {id: 17, name: '丹麦'},

            {id: 18, name: '墨西哥'},

            {id: 19, name: '新加波'},

            {id: 20, name: '印度'},

            {id: 21, name: '以色列'},

          ]

          break
      }
      this.filmTypes.id = 0
      this.filmArea.id = 0
      this.filmPublishTime.id = 0
    },
    'films.currentPage': {
      handler() {
        this.films.beforeReady = !this.films.beforeReady
      }
    }
  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll,true)
  },
  created() {
    this.carousels = [

      {

        id: 1,

        picture: 'https://liangcang-material.alicdn.com/prod/upload/c32d6f8e20fb4270a120efa8b074f189.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80',

        to: ''

      },

      {

        id: 2,

        picture: 'https://liangcang-material.alicdn.com/prod/upload/810308e3087342f0a1c89700b842399a.webp.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80',

        to: ''

      },

      {

        id: 3,

        picture: 'https://liangcang-material.alicdn.com/prod/upload/9045dd09b30a4d4e8eded62a01658c11.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80',

        to: ''

      },

      {

        id: 4,

        picture: 'https://liangcang-material.alicdn.com/prod/upload/d270a00903c34ae29c07910884b9f048.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80',

        to: ''

      }

    ]
    this.hotSearch.data = [
      {id: 1, title: '法医秦明'},
      {id: 2, title: '长津湖'},
      {id: 3, title: '门锁'},
      {id: 4, title: '流浪地球'},
      {id: 5, title: '阿凡达'},
      {id: 6, title: '速度与激情'},
      {id: 7, title: '反贪风暴'},
      {id: 8, title: '乘风破浪的姐姐'},
      {id: 9, title: '知否知否应是绿肥红瘦'},
      {id: 10, title: '扫毒'},
    ]
    this.filmCategories = [
      {id: 1, name: '电视剧'},
      {id: 2, name: '电影'},
      {id: 3, name: '综艺'},
      {id: 4, name: '动漫'},
      {id: 5, name: '纪录片'}
    ]
    this.filmPublishTime.list = [
      {id: 1, name: '2022'},
      {id: 2, name: '2021'},
      {id: 3, name: '2020'},
      {id: 4, name: '2019'},
      {id: 5, name: '2018'},
      {id: 6, name: '2017'},
      {id: 7, name: '2016'},
      {id: 8, name: '2015'},
      {id: 9, name: '2014'},
      {id: 10, name: '2013'},
      {id: 11, name: '2012'},
      {id: 12, name: '2011'},
      {id: 13, name: '2010'},
      {id: 14, name: '00年代'},
      {id: 15, name: '90年代'},
      {id: 16, name: '80年代'},
      {id: 17, name: '70年代'},
    ]
    this.films.list = [
      {

        id: 1,

        title: '长津湖',

        subtitle: '抗美援朝经典之战',

        topLabel: '9.6',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/0584000061A868231FD852098F9700D0?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 2,

        title: '门锁',

        subtitle: '白百何诠释独居女',

        topLabel: '8.6',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/0584000061C567B913F7FF09582A36A3?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 3,

        title: '铁道英雄',

        subtitle: '铁道英雄热血抗战',

        topLabel: '7.6',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/0584000061D00101202742096F393ABB?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 4,

        title: '再战江湖',

        subtitle: '陈小春肉搏黑帮',

        topLabel: '8.9',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/0527000061BC409520274208DAE3909E?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 5,

        title: '扫毒2天地对决',

        subtitle: '华仔古仔双雄争锋',

        topLabel: '9.2',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/058400005F1EBF374265930D3F704B41?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 6,

        title: '二龙湖往事：惊魂夜',

        subtitle: '东北农村离奇诡事',

        topLabel: '8.4',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/0527000061B0646D13F7FF0951E5C6AD?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 7,

        title: '1950他们正年轻',

        subtitle: '致敬抗美援朝英雄',

        topLabel: '7.7',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/0584000061C564C313EB660A46DB5B33?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 8,

        title: '反贪风暴4',

        subtitle: '古仔闯牢狠打虎',

        topLabel: '5.6',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/058400006047253913EA350855339545?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 9,

        title: '请叫我总监',

        subtitle: '职场邂逅欢乐甜怼',

        topLabel: '7.9',

        bottomLabel: '32 集全',

        pic: 'https://m.ykimg.com/05840000616FACD013F7FF098083A771?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 10,

        title: '良辰好景知几何',

        subtitle: '将军爱上清冷才女',

        topLabel: '8.9',

        bottomLabel: '',

        pic: 'https://m.ykimg.com/05840000626514521FD85209207E984E?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 11,

        title: '怦然心动20岁 第二季',

        subtitle: '毕业之旅甜蜜回归',

        topLabel: '9.6',

        bottomLabel: '更新至06-05期',

        pic: 'https://m.ykimg.com/0584000062980D9713EB660937D7BF75?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 12,

        title: '了不起！舞社',

        subtitle: '毕业之旅甜蜜回归',

        topLabel: '9.0',

        bottomLabel: '更新至06-12期',

        pic: 'https://m.ykimg.com/058400006258C3D913EB66114B215112?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
    ]
    this.bingeWatchingList = [
      {

        id: 1,

        title: '继承者们',

        subtitle: '高富帅遇灰姑娘擦爱火',

        topLabel: '首播',

        bottomLabel: '播放到第 24 集',

        pic: 'https://m.ykimg.com/05830000629425FF2037DD08EFD0E016?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 2,

        title: '寒武纪',

        topLabel: 'VIP',

        bottomLabel: '播放到第 2 集',

        subtitle: '侯明昊贺军翔倾情出演',

        pic: 'https://m.ykimg.com/0583000058F5D08AADBA1FA0880E133D?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
      {

        id: 3,

        title: '水怪2：黑木林',

        topLabel: '',

        bottomLabel: '播放到 28:55',

        subtitle: '民间传说水猴子惊悚来袭',

        pic: 'https://liangcang-material.alicdn.com/prod/upload/8eb79232bfa248f0b12f4402c3d1a180.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80'

      },
    ]
    this.categoryId = this.filmCategories[0].id
    this.filmTypes.id = 0
    this.filmArea.id = 0
    this.filmPublishTime.id = 0
  }
}
</script>

<style lang="less" scoped>
  .mask::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .move:hover {
    cursor: pointer;
    color: #2196f3;
    background-color: #F6F6F6;
  }
  .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
    background-color: transparent;
  }
  .tag {
    position: absolute;
    top: 5px;
    right: 0;
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
  }
  .bottom-tag {
    position: absolute;
    bottom: 65px;
    right: 0;
    padding: 0 10px 0 10px;
    height: 30px;
    line-height: 30px;
    background-color: rgba(0, 0, 0, .3);
    color: #FFFFFF;
  }
  .filmList::after{
    content: '';
    width: 230px;
  }
</style>
